<template>
  <div class="login">
    <div class="form">
      <van-form>
        <div>
          <span class="label">工号</span>
          <span>
            <label>
              <input class="input" type="text" v-model="$data.user.userId" @blur="checkUserIdInput" />
            </label>
          </span>
          <!--<span>
            <label>
              <van-field class="input" type="text" v-model="$data.user.userId" @blur="checkUserIdInput" :error-message="$data.errMsg.userId" />
            </label>
          </span>-->
        </div>
        <div>
          <span class="label">密码</span>
          <span>
            <label>
              <input class="input" type="password" v-model="$data.user.password">
            </label>
          </span>
        </div>

        <van-button text="登录" @click="onClickLogin" class="van-button button"/>
        <div class="link">注册新用户</div>
      </van-form>
    </div>
  </div>


</template>


<script>
import {
  Button, SubmitBar, Cell, CellGroup, Form, PasswordInput, Toast, Tag, Field
} from 'vant';

export default {
  components: {
    [Field.name]: Field,
    [Button.name]: Button,
    [SubmitBar.name]: SubmitBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Form.name]: Form,
    [PasswordInput.name]: PasswordInput,
    [Tag.name]: Tag,
  },

  data() {
    return {
      user: {
        userId: null,
        password: null,
        errMsg: {
          userId: null,
          password: null
        }
      }
    }
  },

  methods: {
    onClickLogin() {
      Toast(this.$data.user.userId + ":" + this.$data.user.password);
      this.checkUserIdInput();
    },

    checkUserIdInput() {
      if (!this.user.userId) {
        this.errMsg.userId = '请输入工号'
      } else if (length(this.user.userId) < 6 || length(this.user.userId) > 12) {
        this.errMsg.userId = '工号长度在6-12位'
      }

    }

  }
};
</script>

<style lang="less">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("http://static.yudao.iocoder.cn/login-background.jpg");
  background-size: cover;
}

.form {
  background-color: #FFFFFFff;
  float: left;
  display: block;
  justify-content: center;
  align-items: center;
  height: 30%;
  width: 100%;
  margin-left: 10%;
  margin-right: 10%;
  opacity: 0.9;
}

.input {
  width: fit-content;
  border: 0px;
  outline: none;
  cursor: pointer;
}

.label {
  display: inline-block;
  width: available;
  margin-top: 20px;
  padding-top: 10px;
  margin-left: 10%;
  margin-right: 20px;
}

.button {
  margin-top: 20px;
  background-color: aquamarine;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  color: #000000;
  font-size: 18px;
}

.link {
  color: cornflowerblue;
  margin-top: 4px;
  text-align: center;
  align-content: center;
}

</style>